<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
%>

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>基本信息</title>
    <link href="<%=path %>/web/userinfo/css/my_info.css" rel="stylesheet">
</head>
<body>
<!-- 开始 -->
<div class="my_info_title">我的资料</div>
<div class="my_info_title_3">
    <ul>
        <li id="listClick_1" onClick="listClick(1)" style="border-bottom: 1px solid #C40521; color: #C40521;">基本资料</li>
        <li id="listClick_3" onClick="listClick(3)"><a href="">身份认证</a></li>
        <li id="listClick_4" onClick="listClick(4)">修改密码</li>
    </ul>
</div>
<div class="my_info_content">
    <div class="my_info_content_care"> </div>
    <form action="<%=path %>/web/userinfo/details" method="post">
        <table class="my_info_content_care_table">
        <tbody>
         <input name="id" type="hidden" value="${sessionScope.userinfo.id}">
        <tr>
            <td width="90" align="right" class="color555">用户名：</td>
            <td class="color555"><input class="my_info_content_care_table_text username" name="username" type="text" value="${sessionScope.userinfo.username}">
                </td>
        </tr>
        <tr>
            <td align="right" class="color555">手机号码：</td>
            <td class="color555">${sessionScope.userinfo.phone}</td>
        </tr>
        <tr>
            <td align="right" class="color555">真实姓名：</td>
            <td class="color555"><input class="my_info_content_care_table_text" name="name" type="text" value="${sessionScope.userinfo.name}">
            </td>
        </tr>
        <tr>
            <td align="right" class="color555">性别：</td>
            <td class="color555">
                <c:if test="${sessionScope.userinfo.sex eq null}">
                <label>
                    <input type="radio" name="sex"  value="男">
                    男士 </label>
                <label class="radio-inline">
                    <input type="radio" name="sex"  value="女">
                    女士 </label>
                </c:if>
                <c:if test="${sessionScope.userinfo.sex eq '男'}">
                    <label>
                        <input checked type="radio" name="sex"  value="男">
                        男士 </label>
                    <label class="radio-inline">
                        <input type="radio" name="sex"  value="女">
                        女士 </label>
                </c:if>
                <c:if test="${sessionScope.userinfo.sex eq '女'}">
                    <label>
                        <input type="radio" name="sex"  value="男">
                        男士 </label>
                    <label class="radio-inline">
                        <input checked type="radio" name="sex" value="女">
                        女士 </label>
                </c:if>
            </td>
        </tr>
        <tr>
            <td align="right" class="color555">生日：</td>
            <td class="color555"><input style="font-size:20px" class="my_info_content_care_table_text" name="birthday" type="date" value="${sessionScope.userinfo.birthday}">
            </td>
        </tr>
        <tr>
            <td align="right" class="color555">邮箱：</td>
            <td class="color555"><input class="my_info_content_care_table_text email" name="email" type="text" value="${sessionScope.userinfo.email}">
            </td>
        </tr>
        <tr>
            <td align="right" class="color555">QQ：</td>
            <td class="color555"><input class="my_info_content_care_table_text qq" name="qq" type="text" value="${sessionScope.userinfo.qq}">
            </td>
        </tr>
        <tr>
            <td align="right" class="color555">微信：</td>
            <td class="color555"><input class="my_info_content_care_table_text we-chat" name="wechat" type="text" value="${sessionScope.userinfo.wechat}">
            </td>
        </tr>
        <tr>
            <td align="right" class="color555">所在城市：</td>
            <td class="color555"><div id="my_city">
                <c:if test="${sessionScope.userinfo.provinceId eq 0}" var="result">
                <select class="prov" name="provinceId" style="width: 150px">
                    <c:forEach items="${requestScope.provinces}" var="province">
                        <option value="${province.areaId}">${province.areaName}</option>
                    </c:forEach>
                </select>
                </c:if>
                <c:if test="${not result}">
                    <select class="prov" name="provinceId" style="width: 150px">
                        <c:forEach items="${requestScope.provinces}" var="province">
                            <c:if test="${province.areaId eq sessionScope.userinfo.provinceId}" var="result">
                                <option value="${province.areaId}" selected>${province.areaName}</option>
                            </c:if>
                            <c:if test="${not result}">
                                <option value="${province.areaId}">${province.areaName}</option>
                            </c:if>

                        </c:forEach>
                    </select>
                </c:if>
                <select class="city" name="cityId" style="width: 150px">
                </select>
                <select class="dist" name="areaId" style="width: 150px">
                </select>
              </div></td>
        </tr>

        <tr>
            <td align="right" class="color555">所属职业：</td>
            <td class="color555">
                <select class="profession" name="professionId" style="width:150px">
                    <c:forEach items="${requestScope.professions}" var="profession">
                        <c:if test="${sessionScope.userinfo.professionId eq profession.id}" var="result">
                            <option selected value="${profession.id}">${profession.title}</option>
                        </c:if>
                        <c:if test="${not result}">
                            <option value="${profession.id}">${profession.title}</option>
                        </c:if>
                    </c:forEach>
                </select>
            </td>
        </tr>
        <tr>
            <td align="right" class="color555">个性签名：</td>
            <td class="color555"><textarea rows="6" cols="90" name="remark">${sessionScope.userinfo.remark}</textarea>
            </td>
        </tr>
        <tr>
            <td align="center" class="color555" colspan="2"><input class="my_info_content_care_table_submit" name="" type="submit" value="保    存"></td>
        </tr>
        </tbody>
    </table>
    </form>
</div>

<%--<!-- 结束 -->--%>
<script src="<%=path %>/web/static/js/modules/jquery-3.3.1.min.js"></script>
<script src="<%=path %>/web/userinfo/js/crowdfunding.js"></script>
<script src="<%=path %>/web/static/layui/layui.all.js"></script>
</body>
</html>
<script>
    $(function () {
        initCities();
        $(".prov").change(function () {
            initCities()
        })
        $(".city").change(function () {
            initAreas()
        })



        $(".my_info_content_care_table_submit").click(function () {
            $(window.parent.document).find("#listClick1").attr("class","");
            if($(".username").val()!=""){
                $(window.parent.document).find(".username1").html($(".username").val())
                $(window.parent.document).find(".dead_pic span").html($(".username").val());
            }else{
                $(window.parent.document).find(".username1").html("${sessionScope.userinfo.phone}")
                $(window.parent.document).find(".dead_pic span").html("${sessionScope.userinfo.phone}");
            }


        })


    })

    function initCities() {
        var provinceId = $(".prov").val();
        $(".city").empty();
        $(".dist").empty();
        $.ajax({
            url: "${pageContext.request.contextPath}/web/information/cities",
            data: {"areaId": provinceId},
            type: "get",
            dataType: "json",
            success: function (cities) {
                if(${(sessionScope.userinfo.cityId==0)&&(sessionScope.userinfo.areaId==0)}){
                    for (var i = 0; i < cities.length; i++) {
                        $(".city").append("<option value=\"" + cities[i].areaId + "\">" + cities[i].areaName + "</option>")
                    }
                    $.getJSON("${pageContext.request.contextPath}/web/information/cities", {areaId: $(".city").val()}, function (cities) {
                        for (var i = 0; i < cities.length; i++) {
                            $(".dist").append("<option value=\"" + cities[i].areaId + "\">" + cities[i].areaName + "</option>")
                        }
                    });
                }else{
                    for (var i = 0; i < cities.length; i++) {
                        if((${sessionScope.userinfo.cityId})==cities[i].areaId){
                            $(".city").append("<option selected value=\"" + cities[i].areaId + "\">" + cities[i].areaName + "</option>")
                        }else{
                            $(".city").append("<option value=\"" + cities[i].areaId + "\">" + cities[i].areaName + "</option>")
                        }

                    }
                    $.getJSON("${pageContext.request.contextPath}/web/information/cities", {areaId: $(".city").val()}, function (cities) {
                        for (var i = 0; i < cities.length; i++) {
                            if((${sessionScope.userinfo.areaId})==cities[i].areaId){
                                $(".dist").append("<option selected value=\"" + cities[i].areaId + "\">" + cities[i].areaName + "</option>")
                            }else{
                                $(".dist").append("<option value=\"" + cities[i].areaId + "\">" + cities[i].areaName + "</option>")
                            }

                        }
                    });
                }
            }
        });
    }
    function initAreas() {
        var areaId = $(".city").val();
        $(".dist").empty();
        $.ajax({
            url: "${pageContext.request.contextPath}/web/information/cities",
            data: {"areaId": areaId}, type: "get", dateType: "json",
            success: function (mes) {
                for (var i = 0; i < mes.length; i++) {
                    $(".dist").append("<option value=\"" + mes[i].areaId + "\">" + mes[i].areaName + "</option>")
                }
            }
        })
    }
</script>